<template>
  <div class="customDropCheckbox">
    <div class="inputBox" @click="openSelectPicker">
      <van-field v-model="selectText" label="" placeholder="请选择" input-align="left" clickable readonly />
      <i class="iconfont down">&#xe656;</i>
    </div>
    <van-popup v-model="selectShow" position="bottom" @close="onCancel">
      <!-- <van-picker :title="pickerTitle" show-toolbar :default-index="selectIndex" :columns="selectColumns" :value-key="valueKey" @cancel="selectShow = false" @confirm="onConfirm" /> -->
      <div class="checkTop">
        <div class="canel" @click="onCancel">取消</div>
        <div class="title">{{ pickerTitle }}</div>
        <div class="confirm" @click="onConfirm">确认</div>
      </div>
      <div class="checkBoxList">
        <!-- <van-checkbox v-if="isCheckAll" v-model="checked" @click="checkAll">全部</van-checkbox> -->
        <van-checkbox-group v-model="selectIndex" @change="handleChange">
          <van-checkbox v-for="(item,index) in selectColumns" :key="index" :name="item.name" :disabled="item.disabled" :label-disabled="item.disabled">{{ item.label }}</van-checkbox>
        </van-checkbox-group>
      </div>

    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  props: {
    selectValue: {
      type: Array,
      default: () => []
    },
    pickerTitle: {
      type: String,
      default: '标题'
    },
    selectColumns: {
      type: Array,
      default: () => [
        {
          label: '安全报警',
          name: '安全报警',
          disabled: false
        },
        {
          label: '环保报警',
          name: '环保报警',
          disabled: false
        },
        {
          label: '消防报警',
          name: '消防报警',
          disabled: false
        },
        {
          label: '能源报警',
          name: '能源报警',
          disabled: false
        }
      ]
    },
    valueKey: {
      type: String,
      default: 'text'
    },
    isCheckAll: {
      type: Boolean,
      default: true
    },
    isMust: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      selectText: '',
      selectShow: false,
      selectIndex: [],
      checked: false,
      memoryData: []
    }
  },
  watch: {
    selectValue(nv) {
      this.initPicker()
    },
    selectColumns(nv) {
      this.initPicker()
    }
  },
  mounted() {
    this.initPicker()
  },
  methods: {
    initPicker() {
      this.selectIndex = this.selectValue
      if (this.selectIndex.length > 0) {
        const checkArr = []
        this.selectColumns.forEach(v => {
          if (this.selectIndex.join(',').indexOf(v.name) !== -1) {
            checkArr.push(v.label)
          }
        })
        this.checked = checkArr.length === this.selectColumns.length
        // if (this.checked) {
        //   this.selectText = '全部'
        // } else {
        //   this.selectText = checkArr.join(',')
        // }
        this.selectText = checkArr.join(',')
      } else {
        this.selectText = ''
        this.checked = false
      }
    },
    openSelectPicker() {
      this.selectShow = true
      this.memoryData = JSON.parse(JSON.stringify(this.selectIndex))
    },
    onConfirm() {
      console.log(this.selectIndex)
      if (this.isMust && this.selectIndex.length === 0) {
        return Toast.fail(`必须选择一个业务模块`)
      }
      this.memoryData = JSON.parse(JSON.stringify(this.selectIndex))
      this.$emit('update:selectValue', this.selectIndex)
      this.$emit('change', this.selectIndex)
      this.selectShow = false
    },
    onCancel() {
      this.selectIndex = JSON.parse(JSON.stringify(this.memoryData))
      this.selectShow = false
    },
    checkAll() {
      if (this.checked) {
        this.selectIndex = this.selectColumns.map(v => { return v.name })
      } else {
        this.selectIndex = []
      }
    },
    handleChange() {
      this.checked = this.selectIndex.length === this.selectColumns.length
    }
  }
}
</script>

<style lang="scss">
.customDropCheckbox {
  background: #fff;
  max-width: 300px;
  .inputBox {
    display: flex;
    align-items: center;
    height: 100%;
    .iconfont {
      color: #838282;
      margin-right: 15px;
    }
    .van-cell {
      padding: 0 10px;
      &:active {
        background-color: rgba(0, 0, 0, 0);
      }
      .van-field__control {
        height: 25px;
        font-size: 12px;
        text-align: right;
        &:read-only {
          color: #fff ;
          -webkit-text-fill-color: #fff;
        }
      }
      &::after {
        display: none;
      }
    }
  }
  .checkTop {
    display: flex;
    justify-content: space-between;
    padding: 30px 30px;
    .canel,
    .confirm {
      font-size: 30px;
    }
    .title {
      font-size: 36px;
    }
    .canel {
      color: #969799;
    }
    .confirm {
      color: #576b95;
    }
  }
  .checkBoxList {
    padding: 30px 30px 0;
    max-height: 700px;
    overflow: hidden;
    overflow-y: auto;
  }
  .van-checkbox-group {
    width: 100%;
  }
  .van-checkbox {
    width: 100%;
    margin: 0 auto 0;
    .van-checkbox__icon {
      display: none;
    }
    .van-checkbox__label {
      border-top: 1px solid rgba(233, 233, 233, 0.3);
      height: 50px;
      line-height: 48px;
      padding: 0 10px;
      border-radius: 5px;
      width: 100%;
      text-align: center;
      margin-left: 0;
      font-size: 16px;
    }
    .van-checkbox__icon.van-checkbox__icon--checked + .van-checkbox__label {
      font-weight: bold;
      color: #1989fa;
    }
  }
}
</style>
